/* ====================================== 异步加载 Hooks 组件  ====================================== */
import React, { Component } from 'react'
// =====================================================================
const Index = (importComponent, delay) => {
	
	return class extends Component {
		
		state = { Component: null }
		
		async componentDidMount() {
			
			// importComponent().then(f => this.setState({ Component: React.forwardRef(f.default) }, ()=> this.props.onRef?.(this.refs.ref) ) )
			
			const { default: Component } = await importComponent(); 
			
			if(delay){
				clearTimeout(this.clear)
				this.clear = setTimeout(()=>{
					this.setState({ Component: React.forwardRef(Component) }, () => this.props.onRef?.(this.refs.ref))
				},500)
			}else{
				this.setState({ Component: React.forwardRef(Component) }, () => this.props.onRef?.(this.refs.ref))
			}
		}
		
		componentWillUnmount(){
			if(this.clear){ clearTimeout(this.clear) }
			this.setState = (state, callback) => { return }
		}
		
		render() {
			const { Component } = this.state
			return Component ? <Component ref='ref' {...this.props}/> : null
		}
	}
}

export default Index